import React, { Component } from 'react'
import { 
  Card, 
  Button, 
  Icon, 
  Table, 
  message,
  Modal
} from 'antd';
import LinkButton from '../../components/link-button'
import AddForm from './add-form'
import UpdateForm from './update-form'
import {reqCategorys, reqAddcategorys, reqUpdatecategorys} from '../../api'

export default class Category extends Component {

  category: any;
  form: any;

  state = {
    categorys: [], // 一级分类列表
    loading: false, // 是否正在获取数据中
    parentId: '4', // 当前需要显示的一级列表的parentsId
    parentName: '', // 当前需要显示的一级列表的分类名称
    subCategorys: [], // 二级分类列表
    showStatus: 0, // 添加/更新分类弹窗是否显示  0：都不显示  1：显示添加分类  2：显示更新分类
  }
  
  columns: ({
    title: string; dataIndex: string; 
    key: string; width?: undefined; render?: undefined;
  } | {
    title: string; width: number; render: () => JSX.Element; dataIndex?: undefined; // 显示数据对应的属性名
    key?: undefined;
  })[];

  /**
   * 初始化Table所有列的数组
   */
  initColumns = () => {
    this.columns = [
      {
        title: '分类的名称',
        dataIndex: 'name', // 显示数据对应的属性名
        key: 'name',
      },
      {
        title: '操作',
        width: 300,
        render: (category) => (// 返回需要显示的界面标签
          <span>
            <LinkButton onClick={() => this.showUpdateCategory(category)}>修改分类</LinkButton>
            {
              this.state.parentId === '4'
              ? <LinkButton onClick={() => this.showSubCategorys(category)}>查看子分类</LinkButton>
              : null
            }
          </span>
        )
      },
    ]
  }

  /**
   * 异步获取一级/二级分类列表显示
   * parentId: 如果没有指定根据状态中的parentId请求，如果指定了根据指定的请求
   */
   getCategorys = async (parentId) => {
     // 发请求前，显示loading
     this.setState({loading: true})
     parentId = parentId || this.state.parentId
     const result = await reqCategorys(parentId)
       // 请求后，隐藏loading
      this.setState({loading: false})
     if (result.status === 0) {
        // 取出分类数组(可能是一级分类也可能是二级分类)
       const categorys = result.data
         // 更新一级分类数组状态
        //this.setState({categorys})
      if(parentId === '4') {
        // 更新一级分类数组状态
        this.setState({categorys})
      }else {
        this.setState({subCategorys: categorys})
      }
     } else {
       message.error('获取信息失败')
     }
   }

   /**
    * 显示指定一级分类对象的二级列表
    */
   showSubCategorys = (category) => {
    // 更新状态
    this.setState({
      parentId: category._id,
      parentName:category.name 
    },() => { // 在状态更新且重新render()后执行
      // 获取二级分类列表显示
      this.getCategorys()
      console.log(this.state.parentId) 
    })
    // console.log(this.state.parentId) // '4'
   }

   /**
    * 显示一级分类列表
    */
    ShowCategorys = () => {
      this.setState({
        parentId: '4',
        parentName: '',
        subCategorys: []
      })
    }

    /**
     * 响应点击取消：隐藏确认框
     */
     handleCancel = () => {
       // 清除输入数据
       this.form.resetFields()
       // 隐藏确认框
       this.setState({
         showStatus: 0
       })
     }
     /**
     * 显示添加确定框
     */
     showAddCategory = () => {

      // 隐藏确认框
       this.setState({
         showStatus: 1
       })
     }
     /**
     * 显示修改确定框
     */
      showUpdateCategory = (category) => {
        // 保存分类对象
        this.category = category
        //更新状态
        this.setState({
          showStatus: 2
        })
      }

     /**
      * 添加分类
      */
     addCategory = () => {
      console.log("🚀 ~ file: category.jsx ~ line 125 ~ Category ~ addCategory")
      this.form.validateFields(async(err,values) => {
        if(!err) {
          // 隐藏确认框
          this.setState({
            showStatus: 0
          })
          // 收集数据，并提交添加分类的请求
          const {parentId,categoryName} = values
          const result = await reqAddcategorys({parentId,categoryName})
          // 重新获取分类列表显示
          if(result.status===0) {
            // 添加的分类就是当前分类列表下的分类
            if(parentId===this.state.parentId){
              this.getCategorys()
            } else if(parentId==='4'){ // 在二级分类列表下添加一级分类，重新获取一级分类列表，但是不需要显示一级分类列表
              this.getCategorys('4')
            }
          }
        }
      })
    }
      
     /**
      * 更新分类
      */
      updateCategory = () => {
        // console.log("🚀 ~ file: category.jsx ~ line 132 ~ Category ~ updateCategory")
        // 进行表单验证，只有通过了表单验证，才能进行下一步
        this.form.validateFields(async(err,values) => {
          if(!err) {
            // 隐藏确认框
            this.setState({
              showStatus: 0
            })
            // 准备数据
            const categoryId = this.category._id
            const {categoryName} = values
            // 清除输入数据
            this.form.resetFields()
            // 发请求更新分类
            const result = await reqUpdatecategorys({categoryId,categoryName})
            // 重新显示列表
            if (result.status === 0) {
              this.getCategorys()
            }
          }
        })
      }

  /**
   * 为第一次render()准备数据
   */
  UNSAFE_componentWillMount() {
    this.initColumns()
  }

  /**
   * 执行异步任务：发异步ajax请求
   */
  componentDidMount() {
    this.getCategorys()
  }

  render() {
    // 读取状态数据
    const {
      categorys, 
      loading, 
      parentId, 
      parentName,
      subCategorys,
      showStatus
    } = this.state

    // 读取指定的分类
    const category = this.category || {} // 如果还没有，指定一个空对象(防止报错)

    // card左侧
    const title = parentId === '4' ? '一级分类' : (
      <span>
        <LinkButton onClick={this.ShowCategorys}>一级分类列表</LinkButton>
        <Icon type="arrow-right" style={{marginRight:5}} />
        <span>{parentName}</span>
      </span>
    )
    // card右侧
    const extra = (
      <Button type="primary" onClick={this.showAddCategory}>
        <Icon type="plus" />
        添加
      </Button>
    ) 

    return (
      <Card title={title} extra={extra}>
        <Table
          loading={loading}
          dataSource={parentId=== '4' ? categorys : subCategorys}
          columns={this.columns}
          pagination= {{defaultPageSize: 10,showQuickJumper:  true}}
          bordered
          rowKey= '_id'
          />
          <Modal
          title="添加分类"
          visible={showStatus===1}
          onOk={this.addCategory}
          onCancel={this.handleCancel}
        >
          <AddForm 
            categorys={categorys} 
            parentId={parentId}
            setForm = {(form)=>{this.form = form}}
          />
        </Modal>
        <Modal
          title="修改分类名称"
          visible={showStatus===2}
          onOk={this.updateCategory}
          onCancel={this.handleCancel}
        >
          <UpdateForm 
            categoryName={category.name} 
            setForm = {(form)=>{this.form = form}} 
          />
        </Modal>
      </Card>
    )
  }
}
